<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>报表曲线</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/font/iconfont.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/graphPage.css}" media="all">
    <!-- 引入 ECharts 文件 -->
    <script th:src="@{/js/echarts.js}"></script>
</head>
<body>
<div class="print_div">
    <i class="iconfont icon-dayinji" style="position: absolute;right: 0;"></i>
    <i class="iconfont icon-biaoge3" style="position: absolute;right: 45px;"></i>
</div>
<!-- 打印按钮  end -->
<!-- 打印页面  start -->
<div id="dayin">
    <div class="title" style="margin-top: 0px">
        孔号：<span id="segName" th:text="${holeName}">WML6-16-02-15</span>
        段号：<span th:text="${segName}">005</span>
        时间轴每刻度约4分钟
    </div>
    <div id="echarts_CPQ" style="width: 1060px;height:300px; margin-top: 10px"></div>
    <div id="img_box"></div>

    <div id="echarts_T" style="width: 1000px;height:250px;margin-top: 30px"></div>
    <div id="img_box2"></div>
    <div id="echarts_W" style="width: 1000px;height:250px;margin-top: 30px"></div>
    <div id="img_box3" ></div>
</div>
<!-- 打印页面  end -->

<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/jquery-1.4.4.min.js}"></script>
<script th:src="@{/js/jquery.jqprint-0.3.js}"></script>
<script th:src="@{/js/qrcode.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['form','layer'],function () {
        var form = layui.form;

        // 图1
        var chart_cpq = echarts.init(document.getElementById("echarts_CPQ"));
        var option_cpq = {
            title:"",
            legend:{
                type:"plain",
                right:"200",
                top:"25",
                icon:"rect",
                data:["密度","压力","流量"]
            },
            grid:{
                bottom: '2%',
                containLabel: true
            },
            xAxis:{
                type:"category",
                boundaryGap:false
            },
            yAxis:[{
                type:"value",
                name:"C(g/cm³,1X)",
                show:true,
                min:2,
                axisLine:{
                    lineStyle:{
                        color:"#c23531"
                    }
                }
            },{
                type:"value",
                name:"P(MPa,1X)",
                show:true,
                min:1,
                offset:10,
                axisLine:{
                    lineStyle:{
                        color:"#2f4554"
                    }
                }
            },{
                type:"value",
                name:"Q(L/min,1X)",
                show:true,
                min:1,
                offset:80,
                axisLine:{
                    lineStyle:{
                        color:"#61a0a8"
                    }
                }
            }],
            series:[{
                type:"line",
                symbol: "none",
                name:"密度",
                smooth:true,
                data:[]
            },{
                type:"line",
                symbol: "none",
                name:"压力",
                yAxisIndex: 1,
                data:[],
                smooth:true
            },{
                type:"line",
                symbol: "none",
                name:"流量",
                yAxisIndex: 2,
                data:[],
                smooth:true
            }],
            color:["#c23531","#2f4554","#61a0a8"]
        };
        chart_cpq.setOption(option_cpq);

        // 图2
        var chart_t = echarts.init(document.getElementById("echarts_T"));
        var option_t = {
            legend:{
                right:"200",
                icon:"rect",
                top:"25",
                data:["抬动"]
            },
            grid:{
                // bottom: '1%',
                containLabel: true
            },
            xAxis:{
                type:"category",
                boundaryGap:false
            },
            yAxis:{
                type:"value",
                name:"T(μm,1X)",
                data:[0,15,30,45,60,75,90,105,120,135,150]
            },
            series:[{
                type:"line",
                symbol: "none",
                name:"抬动",
                smooth:true,
                data:[]
            }]
        };
        chart_t.setOption(option_t);

        // 图3
        var chart_w = echarts.init(document.getElementById("echarts_W"));
        var option_w = {
            title:"",
            legend:{
                right:"200",
                icon:"rect",
                top:"25",
                data:["温度"]
            },
            grid:{
                // bottom: '2%',
                containLabel: true
            },
            xAxis:{
                type:"category",
                boundaryGap:false
            },
            yAxis:{
                type:"value",
                name:"T(℃,1X)",
                data:[0,10,20,30,40,50,60,70,80,90]
            },
            series:[{
                type:"line",
                symbol: "none",
                name:"温度",
                smooth:true,
                data:[]
            }]
        };
        chart_w.setOption(option_w);

        $(".icon-dayinji").click(function(){
            // 图一
            var imgBox = $('#img_box');
            var chartBox = $('#echarts_CPQ');
            if (imgBox.length <= 0) {
                chartBox.after('<p id="img_box"></p>');
                imgBox = $('#img_box');
            }
            // 将echart生成图片并放入img-box，并显示图片img-box
            imgBox.html('<img src="' + chart_cpq.getDataURL() + '"/>').css('display','block');
            imgBox.css({"margin-top":"30px"});
            // 隐藏echart图chart-box
            chartBox.css('display','none');
            // 调整img大小
            var img = imgBox.find('img');
            var imgWidth = img.width();
            var showWidth = 1000; // 显示宽度，即图片缩小到的宽度
            if (imgWidth > showWidth) { // 只有当图片大了才缩小
                var imgNewHeight = img.height() / (imgWidth / showWidth);
                img.css({'width': showWidth + 'px', 'height': imgNewHeight + 'px'});
            }
            // 图二
            var imgBox2 = $('#img_box2');
            var chartBox2 = $('#echarts_T');
            if (imgBox2.length <= 0) {
                chartBox2.after('<p id="img_box2"></p>');
                imgBox2 = $('#img_box2');
            }
            // 将echart生成图片并放入img-box，并显示图片img-box
            imgBox2.html('<img src="' + chart_t.getDataURL() + '"/>').css('display','block');
            imgBox2.css({"margin-top":"60px"});
            // 隐藏echart图chart-box
            chartBox2.css('display','none');
            // 调整img大小
            var img2 = imgBox2.find('img');
            var imgWidth2 = img2.width();
            var showWidth2 = 1000; // 显示宽度，即图片缩小到的宽度
            if (imgWidth2 > showWidth2) { // 只有当图片大了才缩小
                var imgNewHeight2 = img2.height() / (imgWidth2 / showWidth2);
                img2.css({'width': showWidth2 + 'px', 'height': imgNewHeight2 + 'px'});
            }
            // 图三
            var imgBox3 = $('#img_box3');
            var chartBox3 = $('#echarts_W');
            if (imgBox3.length <= 0) {
                chartBox3.after('<p id="img_box3"></p>');
                imgBox3 = $('#img_box3');
            }
            // 将echart生成图片并放入img-box，并显示图片img-box
            imgBox3.html('<img src="' + chart_w.getDataURL() + '"/>').css('display','block');
            imgBox3.css({"margin-top":"60px"});
            // 隐藏echart图chart-box
            chartBox3.css('display','none');
            // 调整img大小
            var img3 = imgBox3.find('img');
            var imgWidth3 = img3.width();
            var showWidth3 = 1000; // 显示宽度，即图片缩小到的宽度
            if (imgWidth3 > showWidth3) { // 只有当图片大了才缩小
                var imgNewHeight3 = img3.height() / (imgWidth3 / showWidth3);
                img3.css({'width': showWidth3 + 'px', 'height': imgNewHeight3 + 'px'});
            }

            $("#dayin").jqprint();
            // 执行打印后再切换回来
            // 显示echart图chart-box
            chartBox.css('display','block');
            chartBox2.css('display','block');
            chartBox3.css('display','block');
            // 隐藏图片img-box
            imgBox.css('display','none');
            imgBox2.css('display','none');
            imgBox3.css('display','none');
        });
        $(".icon-biaoge3").click(function () {
            window.location.href = "/report/reportPage";
        });
        // 获取数据
        $.ajax({
            type:"POST",
            url:"http://localhost:8080/report/queryReportLineData",
            data:{
                id:11
            },
            success:function (result) {
                var reportLineData = JSON.parse(result);
                // 密度
                var arr_c = [];
                // 压力
                var arr_p = [];
                // 流量
                var arr_q = [];
                // 抬动
                var arr_t = [];
                // 温度
                var arr_w = [];
                for(var i=0;i<reportLineData.length;i++){
                    arr_c.push(parseFloat(reportLineData[i].c));
                    arr_p.push(parseFloat(reportLineData[i].p));
                    arr_q.push(parseFloat(reportLineData[i].j)-parseFloat(reportLineData[i].f));
                    arr_t.push(reportLineData[i].t);
                    arr_w.push(reportLineData[i].w);
                }
                // 设置各个chart的动态数据
                option_cpq.series[0].data = arr_c;
                option_cpq.series[1].data = arr_p;
                option_cpq.series[2].data = arr_q;
                option_t.series[0].data = arr_t;
                option_w.series[0].data = arr_w;
                // 加载chart组件
                chart_cpq.setOption(option_cpq);
                chart_t.setOption(option_t);
                chart_w.setOption(option_w);
            },
            error:function () {
                // 密度
                var arr_c = [];
                // 压力
                var arr_p = [];
                // 流量
                var arr_q = [];
                // 抬动
                var arr_t = [];
                // 温度
                var arr_w = [];
                console.log("获取数据失败！！！");
                // $("#echarts_CPQ").attr("style","width:950px");
                // 设置各个chart的动态数据
                option_cpq.series[0].data = arr_c;
                option_cpq.series[1].data = arr_p;
                option_cpq.series[2].data = arr_q;
                option_t.series[0].data = arr_t;
                option_w.series[0].data = arr_w;
                // 加载chart组件
                chart_cpq.setOption(option_cpq);
                chart_t.setOption(option_t);
                chart_w.setOption(option_w);
            }
        });

        // 模拟数据
        var jsonData = {
            dev_id:"222",
            online:1,
            channel:3,
            date_time1:"2019-03-02 12:20:39",
            division_project_name1:22,
            cell_project_name1:"五",
            work_state1:0,
            hole_name1:2222,
            seg_name1:1,
            pressure1:20,
            flow_in1:10.2,
            flow_out1:0.0,
            density1:3,
            density_of_flow_out1:2,
            shift1:10,
            low_pressure1:23.1,
            high_pressure1:20.0,
            temperature1:30,
            temperature_rise1:1,
            early_warning1:0,
            alarm1:0,
            slurry1:10,
            status1:0,
            date_time2:"2019-03-02 12:40:39",
            division_project_name2:21,
            cell_project_name2:"六",
            work_state2:0,
            hole_name2:0,
            seg_name2:0,
            pressure2:0,
            flow_in2:0,
            flow_out2:0,
            density2:0,
            density_of_flow_out2:0,
            shift2:0,
            low_pressure2:0,
            high_pressure2:0,
            temperature2:0,
            temperature_rise2:0,
            early_warning2:0,
            slurry2:0,
            alarm2:0,
            status2:0,
            cement1:0,
            cement2:0,
            major_coordinator:1,
            pressure_controller_system:1,
            mix_serosity_system:1
        };

        // 获取数据
        /*$.ajax({
            type:"POST",
            url:"http://localhost:8080/public/realTimeDataAPI",
            data:{
                data:JSON.stringify(jsonData)
            },
            success:function (result) {
                var reportLineData = JSON.parse(result);

            },
            error:function () {
                // console.log(000000);
            }
        });*/

        /*$.ajax({
            type:"POST",
            url:"http://localhost:8080/report/readFile",
            data:{},
            success:function (result) {
                var chartData = JSON.parse(result)[3];
                var reportInfo = JSON.parse(result)[0];

                // 密度
                var arr_c = [];
                // 压力
                var arr_p = [];
                // 流量
                var arr_q = [];
                // 抬动
                var arr_t = [];
                // 温度
                var arr_w = [];
                for(var i=0;i<chartData.length;i++){
                    arr_c.push(parseFloat(chartData[i].c));
                    arr_p.push(parseFloat(chartData[i].p));
                    arr_q.push(parseFloat(chartData[i].j)-parseFloat(chartData[i].f));
                    arr_t.push(chartData[i].t);
                    arr_w.push(chartData[i].w);
                }
                // console.log(arr_c);
                // console.log(arr_p);
                // console.log(arr_q);
                // console.log(arr_t);
                // console.log(arr_w);
                // 设置各个chart的动态数据
                option_cpq.series[0].data = arr_c;
                option_cpq.series[1].data = arr_p;
                option_cpq.series[2].data = arr_q;
                option_t.series[0].data = arr_t;
                option_w.series[0].data = arr_w;
                // 加载chart组件
                chart_cpq.setOption(option_cpq);
                chart_t.setOption(option_t);
                chart_w.setOption(option_w);
            },
            error:function () {
                // 密度
                var arr_c = [];
                // 压力
                var arr_p = [];
                // 流量
                var arr_q = [];
                // 抬动
                var arr_t = [];
                // 温度
                var arr_w = [];
                console.log("获取数据失败！！！");
                // $("#echarts_CPQ").attr("style","width:950px");
                // 设置各个chart的动态数据
                option_cpq.series[0].data = arr_c;
                option_cpq.series[1].data = arr_p;
                option_cpq.series[2].data = arr_q;
                option_t.series[0].data = arr_t;
                option_w.series[0].data = arr_w;
                // 加载chart组件
                chart_cpq.setOption(option_cpq);
                chart_t.setOption(option_t);
                chart_w.setOption(option_w);
                console.log(111);
            }
        });*/

    })
</script>
</body>
</html>